<template>
  <div id="bodypage">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/homePage' }"><span>我的主页</span></el-breadcrumb-item>
    </el-breadcrumb>
    <template>
      <el-carousel :interval="3000" type="card" height="250px" style="margin-top: 20px">
        <el-carousel-item v-for="item in images" :key="item.index">
          <img :src="item.url" alt="无图片" />
        </el-carousel-item>
      </el-carousel>
    </template>
    <div id="topCard">
      <el-row :gutter="25">
        <el-col :span="8">
          <el-card class="infoCard"><i style="color: #4b9100"
              class="fa fa-bar-chart fa-fw"></i><span>羊只数量</span><br /><span class="routerLink"
              @click="goCheckDetail">100</span>&nbsp;只</el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="infoCard"><i style="color: #4b9100" class="fa fa-user fa-fw"></i><span>用户数量</span><br /><span
              class="routerLink">50</span>&nbsp;名</el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="infoCard"><i style="color: #4b9100"
              class="fa fa-user-circle fa-fw"></i><span>在线用户</span><br /><span class="routerLink">8</span>&nbsp;名
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="charts">
      <el-row :gutter="25">
        <div></div>
        <el-col class="chart" :span="8">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>南丁格尔玫瑰图</span>
            </div>
            <div ref="pieChart" class="chartCard">
            </div>
          </el-card>
        </el-col>
        <el-col class="chart" :span="8">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>折线面积图</span>
            </div>
            <div ref="lineChart" class="chartCard">
            </div>
          </el-card>
        </el-col>
        <el-col class="chart" :span="8">
          <el-card shadow="hover">
            <div slot="header" class="clearfix">
              <span>动态排序柱状图</span>
            </div>
            <div ref="barChart" class="chartCard">
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.pieChartInstance()
      this.lineChartInstance()
      this.barChartInstance()
    },
    data() {
      return {
        images: [
          { url: require("../../assets/image/1.jpg") },
          { url: require("../../assets/image/2.jpg") },
          { url: require("../../assets/image/3.jpg") },
          { url: require("../../assets/image/4.jpg") },
          { url: require("../../assets/image/5.jpg") },
          { url: require("../../assets/image/6.jpg") },
        ],
      };
    },

    methods: {
      goCheckDetail() {
        this.$router.push("/sheep_Info");
      },
      // 饼图
      pieChartInstance() {
        const pieChart = this.$echarts.init(this.$refs.pieChart)
        const option = {
          legend: {
            bottom: 10
          },
          tooltip: {
            trigger: 'item'
          },
          series: [
            {
              name: 'Nightingale Chart',
              type: 'pie',
              radius: [15, 80],
              center: ['50%', '38%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 8
              },
              data: [
                { value: 40, name: 'rose 1' },
                { value: 38, name: 'rose 2' },
                { value: 32, name: 'rose 3' },
                { value: 30, name: 'rose 4' },
                { value: 28, name: 'rose 5' },
                { value: 26, name: 'rose 6' },
                { value: 22, name: 'rose 7' },
                { value: 18, name: 'rose 8' }
              ]
            }
          ]
        };
        pieChart.setOption(option)
      },
      // 折线面积图
      lineChartInstance() {
        const lineChart = this.$echarts.init(this.$refs.lineChart)
        const option = {
          grid: {
            height: 200,
            bottom: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              areaStyle: {}
            }
          ]
        };
        lineChart.setOption(option)
      },
      // 动态柱状图
      barChartInstance() {
        const barChart = this.$echarts.init(this.$refs.barChart)
        const data = [];
        for (let i = 0; i < 5; ++i) {
          data.push(Math.round(Math.random() * 200));
        }
        const option = {
          grid: {
            height: 200,
            bottom: 30,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            max: 'dataMax'
          },
          yAxis: {
            type: 'category',
            data: ['A', 'B', 'C', 'D', 'E'],
            inverse: true,
            animationDuration: 300,
            animationDurationUpdate: 300,
            max: 2 // only the largest 3 bars will be displayed
          },
          series: [
            {
              realtimeSort: true,
              name: 'X',
              type: 'bar',
              data: data,
              label: {
                show: true,
                position: 'right',
                valueAnimation: true
              }
            }
          ],
          legend: {
            show: true
          },
          animationDuration: 0,
          animationDurationUpdate: 3000,
          animationEasing: 'linear',
          animationEasingUpdate: 'linear'
        };
        function run() {
          for (var i = 0; i < data.length; ++i) {
            if (Math.random() > 0.9) {
              data[i] += Math.round(Math.random() * 2000);
            } else {
              data[i] += Math.round(Math.random() * 200);
            }
          }
          barChart.setOption({
            series: [
              {
                type: 'bar',
                data
              }
            ]
          });
        }
        setTimeout(function () {
          run();
        }, 0);
        setInterval(function () {
          run();
        }, 3000);
        barChart.setOption(option)
      }
    },
  };
</script>

<style Lang="less" scoped>
  .chart {
    margin: 1.875rem 0;
  }

  .chartCard {
    height: 17.5rem;
  }

  .routerLink:hover {
    color: #03a9f4;
    cursor: pointer;
  }

  * {
    color: #4b9100;
  }

  .infoCard {
    color: #4b9100;
  }

  .infoCard {
    height: 100px;
    margin-top: 30px;
  }

  .infoCard:hover {
    transform: scale(1.1, 1.1);
  }

  #topCard,
  .charts {
    margin: 0 20px 0px 20px;
    box-shadow: 0 0 rgba(128, 128, 128, 0.185) !important;
  }

  #topCard .routerLink {
    display: inline-block;
    margin: 5px 0 0 20px;
    font-size: 25px;
    font-weight: bold;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item {
    width: 660px;
    height: 276px;
    box-shadow: 0 0px 20px rgb(214, 214, 214);
  }

  .el-carousel__item img {
    width: 100%;
    transition: 0.2s;
    filter: blur(2px) !important;
    transform: scale(0.9);
    width: 660px;
    height: 276px;
  }

  /* .is-active  {
  width: 660px;
  height: 276px;
  border-radius: 2px;
} */

  .is-active img {
    opacity: 1 !important;
    filter: blur(0px) !important;
    transform: scale(1);
    width: 660px;
    height: 276px;
    border-radius: 2px;
  }

  g {
    cursor: pointer;
  }

  g :hover {
    fill: rgba(122, 211, 226, 0.705);
  }
</style>